<script>
export default {
    props:{
        width:{
            type:Number,
            default:60,
        }
    },
    methods:{
        getWidth(width){
            return width 
        }        
    },
    render(h){
        return h('button',{
                class:'buttonStyle',
                style:{
                    width: this.getWidth(this.width) + 'px'
                },
                on:{
                    click:()=>{this.$emit('click')}
                }
            },
            this.$slots.default
        )
    }
}
</script>
<style scoped>
*{
    --primary-color: var(--theme-primary-color, #4c535a) ;
    --obprimary-color: var(--theme-obprimary-color,white) ;
    --text-color: var(--theme-text-color, #4c535a) ;
    --disable-color: var(--theme-disable-color, #4c535a) ;
}
</style>
<style scoped>
.buttonStyle{
    background: var(--primary-color);
    border: 0px solid var(--text-color);
    border-radius: var(--theme-border-radius,2px);
    padding:0em 1em;
    line-height: 2em;
    vertical-align: middle;
    height:2em;
    color: var(--obprimary-color);
    cursor: pointer;
    margin:3px;
    user-select: none;
}
.buttonStyle:hover{
    background: rgb(from var(--primary-color) calc(r + 30) calc(g + 30) calc(b + 30));
}
.buttonStyle:active{
    background: rgb(from var(--primary-color) calc(r - 30) calc(g - 30) calc(b + 30));
}
.buttonStyle:disabled{
    background: var(--disable-color);
    cursor:not-allowed;
}
.slotStyle{
    color: var(--text-color);
}
</style>